<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 页面头部==================================== -->
        <div slot="header" class="clearfix">
          <span>试题录入</span>
        </div>
        <!-- 页面内容 form表单==================================== -->
        <el-form :model="ruleForm" :rules="rules" label-width="80px" ref="enterForm">
          <el-form-item label="学科" prop="subjectID">
              <el-select v-model="ruleForm.subjectID" placeholder="请选择" style="width:400px" @change="directorysList">
                <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="目录" prop="catalogID">
              <el-select v-model="ruleForm.catalogID" placeholder="请选择" style="width:400px">
                <el-option v-for="item in directoryslist" :key="item.id" :label="item.directoryName" :value="item.id"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="企业" prop="enterpriseID">
              <el-select v-model="ruleForm.enterpriseID" placeholder="请选择" style="width:400px">
                <el-option v-for="item in companyslist" :key="item.id" :label="item.shortName" :value="item.id"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="城市" prop="province">
              <el-select v-model="ruleForm.province" placeholder="请选择" style="width:198px" @change="citysList">
                <el-option v-for="item in provinceslist" :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <el-select v-model="ruleForm.city" placeholder="请选择" style="width:198px;margin-left:4px">
                <el-option v-for="item in cityslist" :key="item" :label="item" :value="item"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="方向" prop="direction">
              <el-select v-model="ruleForm.direction" placeholder="请选择" style="width:400px">
                <el-option v-for="item in directionlist" :key="item" :label="item" :value="item"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="题型">
              <el-radio-group v-model="radioType">
                <el-radio v-for="item in questionType" :key="item.value" :label="item.value" @change="questionFn(item.value)">{{item.label}}</el-radio>
              </el-radio-group>
          </el-form-item>
          <el-form-item label="难度">
              <el-radio-group v-model="radio">
                <el-radio v-for="item in difficultylist" :key="item.value" :label="item.value">{{item.label}}</el-radio>
              </el-radio-group>
          </el-form-item>
          <el-form-item label="题干" prop="question">
            <div class="edit_container">
              <quill-editor style="height:200px;margin-bottom:50px"
              v-model="ruleForm.question"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
              </quill-editor>
            </div>
          </el-form-item>
          <el-form-item label="选项:" prop="option" v-if="radioShow">
            <div class="option" v-for="(item,index) in uploadForm" :key="index">
              <el-radio-group v-model="radio">
                <el-radio :label="indexFn(index)" style="margin-right: 5px"></el-radio>
              </el-radio-group>
              <!-- <el-radio v-model="item.radioOption" :label="indexFn(index)" style="margin-right: 5px"></el-radio> -->
              <el-input v-model="item.inputOption"></el-input>
              <image-upload/>
            </div>
            <el-button type="danger" :disabled="disabled" style="margin-top:50px" @click="addFn">+增加选项与答案</el-button>
          </el-form-item>
          <el-form-item label="选项:" prop="option" v-if="checkedlShow">
            <div class="option" v-for="(item,index) in uploadForm" :key="index">
              <el-checkbox v-model="item.radioOption" :label="indexFn(index)" style="margin-right: 5px;"></el-checkbox>
              <el-input v-model="item.inputOption"></el-input>
              <image-upload/>
            </div>
            <el-button type="danger" :disabled="disabled" style="margin-top:50px" @click="addFn">+增加选项与答案</el-button>
          </el-form-item>
          <el-form-item label="解析视频" prop="videoURL">
            <el-input v-model="ruleForm.videoURL" style="width:400px"></el-input>
          </el-form-item>
          <el-form-item label="答案解析" prop="answer">
            <div class="edit_container">
              <quill-editor style="height:200px;margin-bottom:50px"
              v-model="ruleForm.answer"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
              </quill-editor>
            </div>
          </el-form-item>
          <el-form-item label="题目备注" prop="remarks">
            <el-input
              type="textarea"
              :rows="5"
              v-model="ruleForm.remarks"
              style="width:400px">
            </el-input>
          </el-form-item>
          <el-form-item label="试题标签">
              <el-select v-model="ruleForm.tags" placeholder="请选择试题标签" style="width:400px">
                <!-- <el-option label="" value=""></el-option> -->
              </el-select>
          </el-form-item>
          <el-form-item>
             <el-button type="primary" @click="submitForm">确认提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>

import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 引入基础题库列表接口
// import { list } from '@/api/hmmm/questions'
// 引入学科简单列表接口
import { simple } from '@/api/hmmm/subjects'
// 引入 目录列表 接口
import { list } from '@/api/hmmm/directorys'
// 引入 企业管理列表 接口
import { list as cmplist } from '@/api/hmmm/companys'
// 引入城市接口,区域
import { provinces, citys } from '@/api/hmmm/citys'
// 引入 方向，题型,难度
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
// 引入接口
import { add, detail } from '@/api/hmmm/questions'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      checkedlShow: false, // 控制多选选项的显示隐藏
      radioShow: true, // 控制单选选项的显示隐藏
      uploadForm: [], // 定义数组接收增加按钮触发后push进来的对象
      disabled: true, // 控制增加按钮是否可以被触发
      subjectList: [], // 学科简单列表
      directoryslist: [], // 目录列表
      companyslist: [], // 企业管理列表
      provinceslist: [], // 城市列表
      cityslist: [], // 城市区域列表
      directionlist: [], // 方向
      questionType: [], // 题型
      difficultylist: [], // 难度
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['blockquote'], // 引用
            ['code-block', 'link', 'image'] // 代码块 链接、图片
          ]
        }
      },
      radioType: '',
      radio: '',
      ruleForm: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 地区
        city: '',
        direction: '', // 方向
        questionType: '', // 题型
        difficulty: '', // 难度
        question: '', // 题干
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      page: '',
      pagesize: '10',
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'blur' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'blur' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请选择地区', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请选择城市', trigger: 'blur' }
        ],
        direction: [
          { required: true, message: '请选择方向', trigger: 'blur' }
        ],
        question: [
          { required: true, message: '请输入题干', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入题干', trigger: 'blur' }
        ]
      },
      id: this.$route.query.id || null
    }
  },
  created () {
    // this.list()
    this.subjectSimple()
    this.companysList()
    this.provincesList()
    this.directionlist = direction
    this.questionType = questionType
    this.difficultylist = difficulty
    this.addFn()
    this.addFn()
    this.addFn()
    this.addFn()
    this.render()
  },
  methods: {
    async subjectSimple () {
      const { data } = await simple()
      // console.log(data)
      this.subjectList = data
    },
    async directorysList () {
      const { data } = await list()
      // console.log(data)
      this.directoryslist = data.items
    },
    async companysList () {
      const { data } = await cmplist()
      // console.log(data)
      this.companyslist = data.items
    },
    provincesList () {
      this.provinceslist = provinces()
    },
    citysList () {
      // console.log(this.ruleForm.province)
      this.cityslist = citys(this.ruleForm.province)
    },
    questionFn (value) {
      // console.log(value)
      if (value === 2) {
        // 开启添加选项
        this.disabled = false
        this.radioShow = false
        this.checkedlShow = true
      } else if (value === 3) {
        // 隐藏选项
        this.radioShow = false
        this.checkedlShow = false
      } else {
        this.radioShow = true
        this.checkedlShow = false
      }
    },
    addFn () {
      this.uploadForm.push({
        radioOption: '',
        inputOption: ''
      })
      this.indexFn()
    },
    indexFn (index) {
      var str = 'A'
      this.label = String.fromCharCode(str.charCodeAt() + index)
      return this.label
    },
    onEditorReady (editor) { // 准备编辑器
    },
    onEditorBlur () {}, // 失去焦点事件
    onEditorFocus () {}, // 获得焦点事件
    onEditorChange () {}, // 内容改变事件
    // 提交表单
    submitForm () {
      this.$refs.enterForm.validate(async (isOK) => {
        console.log(this.ruleForm)
        if (isOK) {
          try {
            await add({ ...this.ruleForm, questionType: '1', difficulty: '1', options: [], tags: '1' })
            this.$router.push('/questions/list')
          } catch (err) {
            console.log(err)
          }
        }
      })
    },
    // 数据回填
    async render () {
      if (this.id) {
        const { data } = await detail({ id: this.id })
        this.ruleForm = data
      }
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  }

}
</script>

<style scoped>
.option {
  width: 300px;
  height: 55px;
  line-height: 55px;
  padding-bottom: 20px;
  margin-top: 20px;
  display: flex;
  align-items: center
}
.el-input{
  width: 260px;
}

</style>
